@import url('https://fonts.googleapis.com/css?family=Montserrat:600');

$msuxf-background: #fff !default;
$msuxf-background-dark: #333 !default;
$msuxf-font-family-alt: 'Montserrat', sans-serif;
$msuxf-transition-duration: 0.25s !default;
$msuxf-transition-timing: ease !default;

.header__main {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    text-align: left;
}

.slider {
    width: 100vw;
    height: 100vh;
}

.slide {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    position: absolute;
    width: 100%;

    &:target {
        .slide__bg {
            opacity: 1;
        }

        .slide__image {
            transform: translate(0);
            opacity: 1;
            transition-delay: 0.5s;
            filter: blur(0) drop-shadow(0px 10px 30px rgba(0,0,0,0.35));
        }
    }
}

.slide__bg {
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(2);
    filter: blur(50px);
    opacity: 0;
    transition: opacity 1s ease;
    will-change: opacity;
}

.slide__images {
    position: relative;
    width: 100%;
    max-width: 900px;
    height: 365px;
    margin: 0 20px;
}

.slide__image {
    position: absolute;
    width: 100%;
    opacity: 0;
    transition: all 0.5s ease-in-out 0s;
    filter: blur(10px) drop-shadow(0px 10px 30px rgba(0,0,0,0.35));
    will-change: transform, opacity, filter;

    svg {
        display: block;
    }

    &--left {
        transform: translate(0.75%, -10px);
    }

    &--right {
        top: 5vmin;
        transform: translate(-0.75%, 10px);
    }
}

.slider__pagination {
    position: absolute;
    bottom: 7vh;
    width: 100%;
    text-align: center;
}

.button {
    position: relative;
    display: inline-block;
    padding: 20px 40px;
    border: 2px solid $msuxf-background;
    line-height: 1; // Normalize height
    font: 600 12px 'Montserrat', sans-serif;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: white;
    transition: all $msuxf-transition-duration $msuxf-transition-timing;
    appearance: none;

    &:hover {
        color: $msuxf-background-dark;
        background-color: white;
    }
}